/*
    reset
    */
body, ul {
    margin: 0;
    padding: 0;
}

body {
    font-size: 12px;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

body, html {
    font-family: 'Helvetica Neue', Helvetica, Arial, 'Microsoft Yahei', 'Hiragino Sans GB', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif !important;
    width: 100%;
    height: 100%;
}

/*
Common style
*/
.left {
    float: left;
}

.right {
    float: right;
}

/*
    header-area
    */
.header-area {
    position: relative;
    text-align: center;
    background: url(../images/BG.jpg) no-repeat center;
}

.content {
    position: relative;
    width: 60%;
    height: 220px;
    margin: 0 auto;
    background: url(../images/content-1.png) no-repeat center 200%;
}

.content p {
    margin: 5px 0;
}

.p-name {
    font-size: 14px;
}

.content img {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    border: 1px solid #fff;
    border-radius: 50%;
}

.bar {
    line-height: 5px;
    width: 200px;
    height: 5px;
    margin: 0 auto;
    background: #e9d2ff;
}

.experience {
    width: 50px;
    height: inherit;
    background: #972fff;
}

.content-experience {
    position: relative;
    width: 200px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .9);
}

.content-experience .iconfont {
    font-size: 12px;
}

.content-grade:before {
    font-size: 12px;
    color: #ecf10a;
}

.content-grade {
    position: absolute;
    bottom: -15px;
    left: 0;
}

.content-percentage {
    position: absolute;
    right: 0;
    bottom: -15px;
}

.content-percentage::after {
    content: '\e609';
    color: #ecf10a;
}

/*
grade-area
*/
.grade-area {
    text-align: center;
}

.grade-area h3 {
    color: #972fff;
}

.grade-content {
    display: -webkit-flex;
    flex-direction: column;
    padding: 5px;
    background-color: #f9f9f9;
}

.content-top {
    display: -webkit-flex;
    flex-direction: row;
    flex: 1;
}

.content-top .module {
    padding: 5px;
    flex: 1;
}

.content-top .module > div {
    padding: 20px 0;
    box-shadow: 0 8px 15px rgba(0, 0, 0, .1), 0 0 1px rgba(0, 0, 0, .1) inset;
}

.content-bottom {
    display: -webkit-flex;
    flex-direction: row;
    margin-top: 20px;
    flex: 1;
}

.content-bottom .module {
    padding: 5px;
    flex: 1;
}

.content-bottom .module > div {
    padding: 20px 0;
    box-shadow: 0 8px 15px rgba(0, 0, 0, .1), 0 0 1px rgba(0, 0, 0, .1) inset;
}

.grade-content p {
    margin: 10px 0 3px;
    color: #bcbcbc;
}

.content-top p {
    color: #232323;
}

.content-bottom p {
    color: #232323;
}

.grade-content span {
    padding: 1px 15px 0;
    color: #bcbcbc;
    border: 1px solid #bcbcbc;
    border-radius: 3px;
}

.img-out {
    display: -webkit-flex;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #fe9893, #fc437d);
    align-items: center;
    justify-content: center;
}

.img-out:before {
    font-size: 2em;
    width: 32px;
    height: 32px;
    color: #fff;
}

.a_gradient {
    background: linear-gradient(135deg, #f8fbb9, #e6f110);
}

.b_gradient {
    background: linear-gradient(135deg, #bcfbfc, #23f0f5);
}

.c_gradient {
    background: linear-gradient(135deg, #b0b0ff, #4a4aff);
}

.d_gradient {
    background: linear-gradient(135deg, #fcefb4, #f5d127);
}

.f_gradient {
    background: linear-gradient(135deg, #d0a2ff, #9224ff);
}

/*
    upgrade-area
    */
.upgrade-area h3 {
    text-align: center;
    color: #972fff;
}

.upgrade-content li {
    font-size: 14px;
    display: -webkit-flex;
    flex-direction: row;
    padding: 5px;
    text-align: left;
}

.upgrade-content .icon {
    display: -webkit-flex;
    padding: 3px 3px 12px;
    border-bottom: 1px solid #dbdbdb;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.upgrade-content .upgrade-text {
    position: relative;
    padding: 0 3px 12px 0;
    border-bottom: 1px solid #dbdbdb;
    flex: 6;
}

.icon:before {
    font-size: 2em;
    width: 32px;
    height: 32px;
    color: #972fff;
}

.upgrade-content .last-none {
    border-bottom: none;
}

.upgrade-content li span {
    font-size: 12px;
    position: absolute;
    bottom: 8px;
    left: 0;
    color: #dbdbdb;
}

/*
    --------------------------------------------------
    直播页面
    --------------------------------------------------
    */
.play-header-area {
    position: relative;
}

.over-text img {
    width: 2.25em;
    height: 2.25em;
    vertical-align: middle;
    border-radius: 50%;
}

.over-text {
    position: absolute;
    top: 5px;
    left: 5px;
    display: inline-block;
    width: 120px;
    border-radius: 15px;
    background: rgba(0, 0, 0, .4);
}

.on-off {
    display: inline-block;
}

.close {
    line-height: 2em;
    display: inline-block;
    width: 50px;
    border: 1px solid #fff;
    border-radius: 20px;
    background: #fff;
}

.open {
    width: 30px;
    text-align: center;
    color: #fff;
    border-radius: 15px;
    background: #972fff;
}

.play-btn button {
    width: 2.5em;
    height: 2.5em;
    border: none;
    border-radius: 50%;
    outline: none;
    background: rgba(255, 255, 255, .8);
}

button:before {
    font-size: 1.5em;
}

.play-btn {
    position: absolute;
    right: 0;
    bottom: 60px;
    left: 0;
    display: -webkit-flex;
}

.play-btn .btn-left {
    display: -webkit-flex;
    padding-left: 10px;
    flex: 1;
}

.play-btn .btn-right {
    padding-right: 10px;
    text-align: right;
    flex: 1;
}

.play-btn button {
    margin: 0 10px;
}

.downAPP {
    position: fixed;
    z-index: 999;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-flex;
    height: 60px;
    background: rgba(0, 0, 0, .8);
}

.APP-text {
    display: -webkit-flex;
    padding: 6px;
    color: rgba(255, 255, 255, .9);
    flex: 4;
}

.APP-text > img {
    width: 4em !important;
    height: 4em !important;
    vertical-align: top;
    border-radius: 10px;
}

.down-text span {
    font-size: 1.3em;
    position: absolute;
    top: -3px;
    left: 5px;
    letter-spacing: 1px;
}

.down-text {
    position: relative;
    flex: 1;
}

.APP-text p {
    line-height: 12px;
    position: absolute;
    bottom: -1px;
    left: 5px;
    display: inline-block;
    width: 100%;
    margin: 0;
    letter-spacing: 1px;
        overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
}

.APP-btn {
    line-height: 60px;
    display: -webkit-flex;
    padding-right: 30px;
    flex: 2;
    align-items: center;
    justify-content: flex-end;
}

.downAPP button {
    border: none;
    outline: none;
}

.down-on {
    padding: 10px 15px;
    opacity: .8;
    color: #fff;
    border-radius: 30px;
    background: #972fff;
}

.fork {
    width: 1.4em;
    height: 1.4em;
    margin-left: 5px;
    padding: 0;
    color: rgba(0, 0, 0, .5);
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
}

.downAPP button:before {
    font-size: 1em;
}

/*
    recommend-area
    */
.recommend-area {
    display: -webkit-flex;
    flex-direction: column;
    height: 900px;
    padding: 0 5px 20px 5px;
}

.recommend-module {
    text-align: center;
    flex: 1;
}


.module-content {
    position: relative;
    display: inline-block;
    text-align: center;
    width: 1.72rem;
    height: 2.4rem;
}

.module-content img {
    width: 98%;
    height: 1.8rem;
    padding: 0 1%;
    border-radius: 10px;
}

.module-content .content-text {
    flex: 1;
}

.content-text {
    display: -webkit-flex;
    flex-direction: row;
}

.content-i {
    display: -webkit-flex;
    align-items: center;
}

.content-i img {
    width: 4em;
    height: 4em;
    border-radius: 50%;
}

.content-t {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    /*padding-left: 10px;*/
    white-space: nowrap;
    letter-spacing: 1px;
    text-overflow: ellipsis;
    flex: 4;
    justify-content: center;
}

.content-t span {
    display: block;
    margin-top: 8px;
    text-align: left;
}

.content-t p {
    font-size: 12px;
    margin-top: 8px;
    text-align: left;
    opacity: .6;
}

.module-content .people-number {
    font-size: 12px;
    position: absolute;
    top: 5px;
    right: 10px;
    padding: 2px 12px;
    color: rgba(255, 255, 255, .8);
    border-radius: 5px;
    background: rgba(0, 0, 0, .3);
}

.people-number::before {
    font-size: 12px;
    padding-right: 3px;
}

/*
    wait_moment
    */
.wait-header-area {
    position: relative;
}

.wait-video::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    background: rgba(0, 0, 0, .5);
}

.own-information {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-top: 100px;
    text-align: center;
}

.wait-header-area img {
    width: 6em;
    height: 6em;
    vertical-align: middle;
    border: 2px solid #fff;
    border-radius: 50%;
}

.own-information p {
    font-size: 1.2em;
    margin-left: 10px;
    color: rgba(255, 255, 255, .8);
}

.own-information span {
    font-size: 1.2em;
    margin-left: 10px;
    color: rgba(255, 255, 255, .8);
}

.own-information-btn button {
    font-size: 1.2em;
    margin: 20px 10px 0;
    padding: 10px 50px;
    color: #fff;
    color: rgba(255, 255, 255, .9);
    border: none;
    border-radius: 30px;
    outline: none;
    background: #972fff;
}